<template>
  <div class="wrap wrap-sku">
    <div class="product-box">
      <div class="product-content">
        <div
          class="product-delcom"
          v-for="(ProductItem, n) in simulatedDATA.specifications"
        >
          <p>{{ ProductItem.name }}</p>
          <ul class="product-footerlist clearfix">
            <li
              v-for="(oItem, index) in ProductItem.item"
              v-on:click="specificationBtn(oItem.name, n, $event, index)"
              v-bind:class="[
                oItem.isShow ? '' : 'noneActive',
                subIndex[n] == index ? 'productActive' : '',
              ]"
            >
              {{ oItem.name }}
            </li>
          </ul>
        </div>
        <p v-if="price" class="price">¥{{ price }}</p>
      </div>
      <div class="product-footer">
        <a href="javascript:" rel="external nofollow">立即购买</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      simulatedDATA: {
        //模拟后台返回的数据 多规格
        difference: [
          {
            //所有的规格可能情况都在这个数组里
            id: "19",
            price: "200.00",
            stock: "19",
            difference: "100,白色",
          },
          {
            id: "20",
            price: "100.00",
            stock: "29",
            difference: "200,白色",
          },
          {
            id: "21",
            price: "300.00",
            stock: "10",
            difference: "100,黑色",
          },
          {
            id: "22",
            price: "900.00",
            stock: "0",
            difference: "200,黑色",
          },
          {
            id: "23",
            price: "600.00",
            stock: "48",
            difference: "100,绿色",
          },
          {
            id: "24",
            price: "500.00",
            stock: "40",
            difference: "200,绿色",
          },
          {
            id: "25",
            price: "90.00",
            stock: "0",
            difference: "100,蓝色",
          },
          {
            id: "26",
            price: "40.00",
            stock: "20",
            difference: "200,蓝色",
          },
        ],
        data0: [
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "4",
            stock: "true",
            sku: "白色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            isGwCart: "1",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 119,
          },
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "3",
            stock: "true",
            sku: "白色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 120,
          },
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "72",
            stock: "true",
            sku: "白色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            isGwCart: "1",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 121,
          },
          {
            skuName1: "颜色",
            skuValue1: "白色",
            颜色: "白色",
            price: "62",
            stock: "true",
            sku: "白色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 122,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "52",
            stock: "true",
            sku: "黑色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            isGwCart: "1",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 123,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "42",
            stock: "true",
            sku: "黑色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 124,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "32",
            stock: "false",
            sku: "黑色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            isGwCart: "0",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 125,
          },
          {
            skuName1: "颜色",
            skuValue1: "黑色",
            颜色: "黑色",
            price: "22",
            stock: "false",
            sku: "黑色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "0",
            id: 126,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "12",
            stock: "false",
            sku: "橘色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            isGwCart: "0",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 127,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "82",
            stock: "false",
            sku: "橘色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "0",
            id: 128,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "5",
            stock: "false",
            sku: "橘色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            isGwCart: "0",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            id: 129,
          },
          {
            skuName1: "颜色",
            skuValue1: "橘色",
            颜色: "橘色",
            price: "12",
            stock: "false",
            sku: "橘色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "0",
            id: 130,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*28100g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            isGwCart: "1",
            id: 131,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*28100g200g",
            skuName2: "大小",
            skuValue2: "20*28",
            大小: "20*28",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 132,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*2830*45100g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "100g",
            重量: "100g",
            isGwCart: "1",
            id: 133,
          },
          {
            skuName1: "颜色",
            skuValue1: "粉色",
            颜色: "粉色",
            price: "0",
            stock: "true",
            sku: "粉色20*2830*45100g200g",
            skuName2: "大小",
            skuValue2: "30*45",
            大小: "30*45",
            skuName3: "重量",
            skuValue3: "200g",
            重量: "200g",
            isGwCart: "1",
            id: 134,
          },
        ],

        data1: [
          {
            typeName: "颜色",
            tags: ["白色", "黑色", "橘色", "粉色"],
          },
          {
            typeName: "大小",
            tags: ["20*28", "30*45"],
          },
          {
            typeName: "重量",
            tags: ["100g", "200g"],
          },
        ],
        specifications: [
          {
            //这里是要被渲染字段
            name: "尺寸",
            item: [
              {
                name: "100",
              },
              {
                name: "200",
              },
            ],
          },
          {
            name: "颜色",
            item: [
              {
                name: "白色",
              },
              {
                name: "蓝色",
              },
              {
                name: "黑色",
              },
              {
                name: "绿色",
              },
            ],
          },
        ],
      },
      selectArr: [], //存放被选中的值
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
      price: "", //选中规格的价钱
    };
  },
  methods: {
    specificationBtn: function (item, n, event, index) {
      var self = this;
      if (self.selectArr[n] != item) {
        self.selectArr[n] = item;
        self.subIndex[n] = index;
      } else {
        self.selectArr[n] = "";
        self.subIndex[n] = -1; //去掉选中的颜色
      }
      self.checkItem();
    },
    checkItem: function () {
      var self = this;
      var option = self.simulatedDATA.specifications;
      var result = []; //定义数组储存被选中的值
      for (var i in option) {
        result[i] = self.selectArr[i] ? self.selectArr[i] : "";
      }
      for (var i in option) {
        var last = result[i]; //把选中的值存放到字符串last去
        for (var k in option[i].item) {
          result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
          option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时被覆盖
      }
      if (this.shopItemInfo[result]) {
        console.log(this.shopItemInfo[result], 4444444);
        this.price = this.shopItemInfo[result].price || "";
      }
      self.$forceUpdate(); //重绘
    },
    isMay: function (result) {
      for (var i in result) {
        if (result[i] == "") {
          return true; //如果数组里有为空的值，那直接返回true
        }
      }
      return this.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存，若不为空返回true反之返回false
    },
  },
  created () {
    var self = this;

    self.simulatedDATA.difference = self.simulatedDATA.data0?.map((r) => {
      return {
        ...r,
        stock: r.stock == "true" ? 1 : 0,
        difference: r.skuValue1 + "," + r.skuValue2 + "," + r.skuValue3,
      };
    });

    self.simulatedDATA.specifications = self.simulatedDATA.data1?.map((r) => {
      return {
        name: r.typeName,
        item: r.tags?.map((s) => {
          return {
            name: s,
          };
        }),
      };
    });

    for (var i in self.simulatedDATA.difference) {
      self.shopItemInfo[self.simulatedDATA.difference[i].difference] =
        self.simulatedDATA.difference[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
    }
    self.checkItem();
  },
};
</script>

<style lang="scss" rel="stylesheet">
.wrap-sku {
  .product-box {
    width: 1200px;
    display: block;
    margin: 0 auto;
  }
  .product-content {
    margin-bottom: 100px;
  }
  .product-delcom {
    color: #323232;
    font-size: 14px;
    border-bottom: 1px solid #eeeeee;
  }

  .product-footerlist li {
    list-style-type: none;
    border: 1px solid #606060;
    border-radius: 5px;
    color: #606060;
    text-align: center;
    padding: 5px 15px;
    float: left;
    margin-right: 20px;
    cursor: pointer;
  }
  .product-footerlist li.productActive {
    background-color: #1a1a29;
    color: #fff;
    border: 1px solid #1a1a29;
  }
  .product-footerlist li.noneActive {
    background-color: #ccc;
    opacity: 0.4;
    color: #000;
    pointer-events: none;
  }
  .product-footer {
    background-color: #1a1a29;
    text-align: center;
  }
  .product-footer a {
    color: #fff;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }
  .price {
    font-size: 16px;
    height: 60px;
    line-height: 60px;
  }
}
</style>